<wide-header-page title="{{'Order Summary' | translate}}" hideBackButton="true">
  <ion-buttons right>
    <button clear wide-header-bar-button (click)="cancelOrder()" ion-button>
      <span translate>Cancel</span>
    </button>
  </ion-buttons>
  <div page-content>
    <ion-list class="bp-list">
      <div class="item-label" translate>Amount</div>
      <ion-card class="item-card" (click)="openAmountModal()">
        <ion-item>
          <div class="main-label"> <span *ngIf="currency == 'USD'">$</span>{{amount | number : getDigitsInfo(currency)}}<span *ngIf="currency != 'USD'"> {{currency}}</span></div>
          <ion-note item-end>
            <ion-row align-items-center>
              <ion-icon item-end name="ios-arrow-forward-outline" color="light-grey"></ion-icon>
            </ion-row>
          </ion-note>
        </ion-item>
      </ion-card>

      <div class="item-label" translate>Deposit to</div>
      <ion-card class="item-card" (click)="openCryptoCoinSelectorModal()">
        <ion-item>
          <coin-icon item-start [coin]="wallet?.coin" [network]="wallet?.network"></coin-icon>
          <div *ngIf="wallet" class="main-label">
            {{wallet?.name}}
          </div>
          <div *ngIf="!wallet" class="main-label warn-msg" translate>
            No wallet selected
          </div>
          <ion-note item-end>
            <ion-row align-items-center>
              <div class="secondary-note address-label">
                <span>{{address | shortenedAddress}}</span>
              </div>
              <ion-icon item-end name="ios-arrow-forward-outline" color="light-grey"></ion-icon>
            </ion-row>
          </ion-note>
        </ion-item>
      </ion-card>

      <div class="item-label" translate>Country</div>
      <ion-card class="item-card" (click)="openCountrySelectorModal()">
        <ion-item>
          <div class="main-label">{{selectedCountry?.name}}</div>
          <ion-note item-end>
            <ion-row align-items-center>
              <div class="secondary-note address-label">
                <span>{{selectedCountry?.threeLetterCode}}</span>
              </div>
              <ion-icon item-end name="ios-arrow-forward-outline" color="light-grey"></ion-icon>
            </ion-row>
          </ion-note>
        </ion-item>
      </ion-card>

      <div class="item-label" translate>Payment Method</div>
      <ion-card class="item-card" (click)="openCryptoPaymentMethodModal()">
        <ion-item>
          <div class="main-label">{{paymentMethod?.label}}</div>
          <ion-note item-end>
            <ion-row align-items-center>
              <ion-icon class="item-img" item-start>
                <img src="{{paymentMethod?.imgSrc}}">
              </ion-icon>
              <ion-icon item-end name="ios-arrow-forward-outline" color="light-grey"></ion-icon>
            </ion-row>
          </ion-note>
        </ion-item>
      </ion-card>
    </ion-list>

    <button ion-button class="button-standard button-primary" (click)="goToCryptoOffersPage()" [disabled]="!wallet">
      <span>{{'View Offers' | translate}}</span>
    </button>
  </div>
</wide-header-page>